<template>
  <div class="root">
        <el-form ref="form"
                 type="flex"
                 :model="form"
                 label-width="100px"
                 style="width:600px"
                 enctype="multipart/form-data"
        >

        </el-form>

    <!--    v-loading="listLoading"-->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-loading = "listLoading"
    >
      <el-table-column align="center" label="文件名" prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.fileName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="上传时间"  prop="date">
        <template slot-scope="techlist">
          <span>{{parseDateFull(techlist.row.time)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="加急"  prop="date">
        <template slot-scope="techlist">
          <span>{{techlist.row.isUrgent == true ? '是' : '否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="下载"  prop="date">
        <template slot-scope="techlist">
          <el-Button type="primary" @click="downloadHistoryExcel(techlist.row)" >下载</el-Button>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center" prop="created_at" label="删除" width="150" >
        <template slot-scope="techlist">
          <el-button type="danger" icon="el-icon-delete" size="small"  @click="confirmdeleteHistory(techlist.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>

  import FileSelect from '../update/FileSelect.vue';
  import axios from 'axios';

  export default {
    components: {FileSelect},
    data() {
      return {
        counter:[{
          aCode:'',
          standardComeTime:'',
        }],//循环的内容
        //标准间来料日期，机台号
        list:[],
        techlist:[],
        dataForm:{
          name: '',
          file: null
        },
        hasfile:false,
        logoList: [],
        address: '',
        checked:false,
        filelist:[],
        form: {
          versionName:'',
          versionTag:'',
          name: '',
          file: null,
          color: '#ff0000'
        },
        imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [this.imgUrl],
        listLoading:false,
      };
    },
    created: function() {
        this.fetchData();
    },
    methods: {
      parseDateFull(time){
        if(time === '' || time == null || time == '')
          return '';

        var x = new Date(time);
        var z = {
          y: x.getFullYear(),
          M: x.getMonth() + 1,
          d: x.getDate(),
          h: x.getHours(),
          m: x.getMinutes(),
          s: x.getSeconds()
        };
        if (z.M < 10) {
          z.M = "0" + z.M;
        }
        if (z.d < 10) {
          z.d = "0" + z.d;
        }
        if (z.h < 10) {
          z.h = "0" + z.h;
        }
        if (z.m < 10) {
          z.m = "0" + z.m;
        }
        if (z.s < 10) {
          z.s = "0" + z.s;
        }
        return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m +":" + z.s ;
      },
      confirmdeleteHistory(row){
        var that = this;
        this.$confirm('确认删除吗').then( _ => {
          axios.get("/tech-push-history/deleteTph",{
            params:{
              id: row.id,
            },
          }).then( res => {
            if(res.data.code == "20000"){
              let arr = [...JSON.parse(res.data.data)];
              console.log(arr);
              this.list = arr;
            }else if (res.data.code == '40000') {
              this.$alert(res.data.data);
            }
            this.listLoading = false;
          }).catch( res => {
                this.listLoading = false;
              }
          )
        }).catch( _ =>{

        })
      },
      downloadHistoryExcel(row){
        console.log(row.address);
        axios.get("/tech-push-history/getExcel",{
          params:{
            id : row.id
          },
          responseType:'blob'
        }).then( response => {//TODO导出存在问题
          debugger
          let blob = new Blob([response.data],{type:'application/octet-stream'});
          let link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          //
          var fiName = row.fileName.slice(0,-5);
          var F = fiName + ".xls";
          console.log(F);
          link.download = F;
          link.click();
            })
      },
      addInput(){
        this.counter.push({'aCode':'','standardComeTime':''});
      },
      del(index){
        this.counter.splice(index,1);
      },

      onChange(e){
        console.log(`checked"+ ${e.target.checked}`)
      },

      clickpush(){
        this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
      },
      handleremove(file,filelist){
        if(!filelist.length){
          this.hasfile = false;
        }
        this.form.file = null;
      },
      handlechange(file,filelist){
        if(filelist.length ==1){
          this.hasfile = true;
        }
        this.form.file = file;
      },
      openM() {
        this.$alert("上传成功");
      },
      addEquip(){
        let data = {"equips":this.counter};
        axios.post('/production/insertSche',data)
            .then( res => {
              if(res.data.code == "20000"){
                let arr = [...JSON.parse(res.data.data)];
                this.list = arr;
                this.openM();
              }else {
                this.$alert("编号" + res.data.data + "重复");
              }
              this.listLoading = false;
            }).catch( f=>{
          this.listLoading = false;
        })

      },
      fetchData() {
        this.listLoading = true;
        axios.get('/tech-push-history/gethistory').then( (res) => {
          if (res.data.code == "20000"){
            let arr = [...JSON.parse(res.data.data)];
            this.list = arr;
          }
          this.listLoading = false;
        }).catch(f =>{
          this.listLoading = false;
        })
      },

    }
  };
</script>

<style>
  .choose-color{
    z-index: 9999;
    /* width: 210px; */
  }
  .line {
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    height: 500px;
    margin-left: 68px;
  }
  .box{
    width: 220px !important;
  }
</style>
